<template>
  <div>
    <vxe-modal
      @close="cancel"
      esc-closable
      destroy-on-close
      :lock-view="false"
      :width="560"
      :height="556"
      v-model="props.openModal"
      resize
      :mask="true"
    >
      <template #title>
        <div class="w100 h100 fsc" style="height: 22px">
          {{ props.modaltitle }}
        </div>
      </template>
      <template #default>
        <div class="w100 h100 tableBox">
          <el-form
            :model="form_data"
            label-position="top"
            :rules="rules"
            ref="formRef"
          >
            <el-form-item label="模板名称" prop="name">
              <el-input
                v-model="form_data.name"
                placeholder="请输入"
                clearable
              />
            </el-form-item>
            <el-form-item label="报警原因" prop="reason">
              <el-input
                type="textarea"
                :rows="3"
                v-model="form_data.reason"
                placeholder="请输入"
                clearable
              />
            </el-form-item>
            <el-form-item label="处理措施" prop="measure">
              <el-input
                type="textarea"
                :rows="3"
                v-model="form_data.measure"
                placeholder="请输入"
                clearable
              />
            </el-form-item>
            <el-form-item label="处理结果" prop="result">
              <el-input
                type="textarea"
                :rows="3"
                v-model="form_data.result"
                placeholder="请输入"
                clearable
              />
            </el-form-item>
          </el-form>
          <div class="footer">
            <div>
              <el-button
                v-if="props.modaltitle == '修改模板'"
                @click="delTemp"
                type="danger"
                plain
                >删除模板</el-button
              >
            </div>
            <div>
              <el-button @click="cancel">取消</el-button>
              <el-button @click="sumbitClick" type="primary">确定</el-button>
            </div>
          </div>
        </div>
      </template>
    </vxe-modal>
  </div>
</template>
<script setup>
import {
  computed,
  nextTick,
  onActivated,
  onMounted,
  onUnmounted,
  reactive,
  ref,
  watch,
  inject,
} from "vue";
import { ElMessage, ElMessageBox, ElNotification } from "element-plus";
import axios from "@/utils/request";
import { useRouter } from "vue-router";
import { useStore } from "vuex";

const emit = defineEmits(["cancel", "sumbitClick", "delTemp"]);
const props = defineProps({
  openModal: {
    type: Boolean,
    default: false,
  },
  modaltitle: {
    type: String,
    default: "新增模板",
  },
  status: {
    type: String,
    default: "A",
  },
  editId: {
    type: Number,
    default: 0,
  },
});
let formRef = ref();
const form_data = ref({});
const rules = reactive({
  name: [{ required: true, message: "模板名称不能为空", trigger: "blur" }],
  reason: [
    { required: true, message: "报警原因不能为空", trigger: "blur" },
  ],
  measure: [
    { required: true, message: "处理措施不能为空", trigger: "blur" },
  ],
  result: [{ required: true, message: "处理结果不能为空", trigger: "blur" }],
});

// 获取模板详情
const getInfoData = () => {
  axios.post("/template/analysis/list", { id: props.editId }).then((res) => {
    if(res.data!=null){
      form_data.value = res.data[0];
    }
  });
};
// 提交模板新增/修改
const sumbitClick = () => {
  form_data.value.status = props.status;
  formRef.value.validate((valid) => {
    if (valid) {
      emit("sumbitClick", {
        form_data: form_data.value,
        modaltitle: props.modaltitle,
      });
    }
  });
};

// 取消并关闭弹窗
const cancel = () => {
  form_data.value = {};
  emit("cancel");
};
// 删除模板
const delTemp = () => {
  ElMessageBox.confirm(
    "是否确认删除模板?",
    "提示",
    {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    }
  ).then(() => {
    emit("delTemp", form_data.value.id);
    cancel()
  });
};

watch(
  () => props.openModal,
  () => {
    if (props.modaltitle == "修改模板") {
      getInfoData();
    }
  }
);
</script>
<style lang="scss" scoped>
::v-deep .vxe-modal--wrapper .vxe-modal--header {
  padding: 0 !important;
  height: 40px !important;
  background: rgba(64, 158, 255, 0.4);
  border-bottom: none;
}
.tableBox {
  .footer {
    text-align: end;
    display: flex;
    justify-content: space-between;
  }
}
</style>
